<template>
  <div style="padding: 10px 0px 0px 10px;/* display: none; */">
    <div class="el-row">
      <div class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-5 el-col-lg-5">
        <router-link to="/" class="router-link-active">
          <button type="button" class="el-button el-button--plain">
            <i class="el-icon-menu"></i>
            <span>首页</span>
          </button>
        </router-link>
        <button @click="$router.back()" class="el-button el-button--plain" style="margin-left:5px;">
          <i class="el-icon-back"></i>
          <span>返回</span>
        </button>
      </div>
      <div class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-19 el-col-lg-19">
        <div class="nav-bar">
          <div default-active="/" class="nav-bar-inner">
            <ul role="menubar" class="el-menu--horizontal el-menu" v-if="JSON.stringify(userInfo)!='{}'">
              <li
                class="el-menu-item"
                style="border-bottom-color: transparent;"
                @click="useCodeDialog=true"
              >绑定使用码</li>
              <router-link
                tag="li"
                to="/user/index"
                class="el-menu-item"
                style="border-bottom-color: transparent;"
              >个人中心</router-link>
              <li
                class="el-menu-item"
                style="border-bottom-color: transparent;"
              >常见问题</li>
              <router-link
                tag="li"
                to="/shop/index"
                class="el-menu-item"
                style="border-bottom-color: transparent;"
              >商城中心</router-link>
              <router-link
                tag="li"
                to="/order/list"
                class="el-menu-item"
                style="border-bottom-color: transparent;"
              >我的订单</router-link>
              <router-link
                tag="li"
                to="/order/recommendOrderList"
                class="el-menu-item"
                style="border-bottom-color: transparent;"
              >我的推荐</router-link>
              <li
                @click="workDialog=true"
                class="el-menu-item"
                style="border-bottom-color: transparent;"
              >工单反馈</li>
            </ul>
            <ul role="menubar" class="el-menu--horizontal el-menu" v-else>
              <router-link
                tag="li"
                to="/exam/index"
                class="el-menu-item"
                style="border-bottom-color: transparent;"
              >游客体验中心</router-link>
              <li
                tag="li"
                to="/shop/index"
                class="el-menu-item"
                style="border-bottom-color: transparent;"
              >商城中心</li>
              <router-link
                tag="li"
                to="/passport/login"
                class="el-menu-item"
                style="border-bottom-color: transparent;"
              >登录</router-link>
              <li
                tag="li"
                to="/passport/register"
                class="el-menu-item"
                style="border-bottom-color: transparent;"
              >注册</li>
            </ul>
          </div>
        </div>
        <el-dropdown @command="handleCommand" class="avatar-container" v-if="JSON.stringify(userInfo)!='{}'">
          <span class="el-dropdown-link" style="font-size: 16px;color:#409eff;cursor:pointer;">
            {{userInfo.user_name}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="workorder">我的反馈和工单</el-dropdown-item>
            <el-dropdown-item command="exit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-dialog width="80%" title="绑定使用码" :visible.sync="useCodeDialog">
      <el-form :model="useCode">
        <el-form-item label="输入使用码" label-width="100px">
          <el-input v-model="useCode.code" autocomplete="off"></el-input>
          <el-row>
            <font data-v-2c01f74e="" color="red">注意</font>
            <span>：一个使用码仅可绑定一个账号，不能重复绑定；一个账号可以同时绑定多个使用码</span>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="useCodeDialog = false">取 消</el-button>
        <el-button type="primary" @click="useCodeDialog = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog width="80%" title="工单反馈" :visible.sync="workDialog">
      <div class="editor">
        <editor id="tinymce" placeholder="请输入内容" v-model="tinymceHtml" :init="editorInit"></editor>
        <center style="margin-top:20px;">
          <el-button type="primary" @click="submitWorkOrder">确定提交</el-button>
        </center>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import {mapState} from 'vuex'
var plugins='link lists image code table colorpicker textcolor wordcount contextmenu'
var toolbar='bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat'
export default {
  name: "top-nav",
  data:()=>({
    useCodeDialog:false,
    useCode:{
      code:''
    },
    workDialog:false,
    editorInit: {
      language_url: '/tinymce/langs/zh_CN.js',
      language: 'zh_CN',
      skin_url: '/tinymce/skins/lightgray',
      height: 300,
      plugins: plugins,
      toolbar: toolbar,
      branding: false
    },
    tinymceHtml:''
  }),
  methods:{
    async submitWorkOrder(){
      if(!this.tinymceHtml){
        this.$message({
          message: '请输入内容',
          type: 'error'
        });
        return
      }
      let {data:{code,data}}=await this.$http.post(this.$api.workOrder,{contents:this.tinymceHtml})
      if(code==200){
        this.$message({
            message: '提交成功',
            type: 'success'
          });
          this.workDialog=false
      }else{
        this.$message({
          message: data.msg,
          type: 'error'
        });
      }
    },
    handleCommand(command){
      if(command=='exit'){
        localStorage.clear()
        this.$router.replace('/passport/login')
      }
    }
  },
  watch: {
    value(newValue) {
      this.tinymceHtml = newValue
    },
    tinymceHtml(newValue) {
      this.$emit('input', newValue)
    }
  },
  components: {
    Editor
  },
  computed:{
    ...mapState(['userInfo'])
  }
};
</script>

<style lang="scss" scoped>
.nav-bar {
    display: inline-block;
    .el-menu-item {
      height: 40px;
      line-height: 40px;
  }
}
.avatar-container {
    height: 50px;
    display: inline-block;
    position: absolute;
    border-radius: 10px;
    right: 15px;
    top: 10px;
}
</style>
